// 全局自定义指令
/*
   自定义指令：
          vue.directive("指令名",{
            指令的生命周期
            bind:绑定时:指令所在dom已读取,但还没有绑定,类似于beforeMount
            inserted：渲染时，指令所在dom添加到父节点时执行,类似于mounted
            update：更前时，不保证更新完成,可能更新完成也可能没有更新完成，只能代表指令所在组件有更新
            componentUpdated:销毁后，指令所在dom销毁时会执行,类似于destroyed，常用于善后工作 setInterval scroll.....
            bind(dom.obj.vnode){
              dom:指令所在dom
              obj:{
                属性名
                修饰符
                值:value
              }
              vnode:指令所在dom的节点信息，虚拟dom信息,包含指令所在组件的实例对象(this)
                    context:指令所在组件的实例对象(this)
            }
          })
          使用:v-指令名:属性名.修饰符="值"
          v-on:keyup.enter="function"

    局部自定义指令
           directives:{
            指令名:{
              指令的生命周期
            }
           }
*/
//  第二种写法相当于比较简单
//  自定义指令
import employees from '@/api/constant/employees'
function changeStr(dom, obj) {
  const findItem = employees.stausInfos.find((item) => {
    return +item.id === +obj.value
  })
  dom.innerText = findItem ? findItem.value : '-'
}

let chiaHred = ''
const directivesObj = {
  errorImg: {
    inserted(dom, obj) {
      dom.src = dom.src || obj.value || require('@/assets/common/head.jpg')
      dom.onerror = () => {
        dom.src = obj.value || require('@/assets/common/head.jpg')
      }
    },
    componentUpdated(dom, obj) {
      dom.src = dom.src || obj.value || require('@/assets/common/head.jpg')
    }
  },
  xxx: {},
  // 自定义指令
  formatter: {
    inserted(dom, obj, vnode) {
      changeStr(dom, obj)
    },
    componentUpdated(dom, obj) {
      changeStr(dom, obj)
    }
  },
  // 自定义指令
  //  点击dom区域外执行某事件
  clickOut: {
    inserted(dom, obj) {
      chiaHred = (e) => {
        //  dom:区域dom
        //  点击dom:e.target
        if (dom.contains(e.target)) {
          console.log('区域外')
        } else {
          console.log('区域内')
          obj.value()
        }
      }
      document.addEventListener('click', chiaHred)
    },
    unbind() {
      document.removeEventListener('click', chiaHred)
    }
  }
}
export default function(Vue) {
  Object.keys(directivesObj).forEach((key) => {
    Vue.directive(key, directivesObj[key])
  })
}
